<%@page contentType="text/html" %>
<%@page pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>
    <link type="text/css" rel="stylesheet" href="/css/individual.css"/>
    <link type="text/css" rel="stylesheet" href="/css/bootstrap.min.css"/>
    <link type="text/css" rel="stylesheet" href="css/individual.css"/>
    <style>
        .tu {
            margin-top: 100px;
        }
    </style>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <link type="text/css" rel="stylesheet" href="/css/individual.css"/>
        <link type="text/css" rel="stylesheet" href="/css/bootstrap.min.css"/>
        <script type="text/javascript" src="/js/jquery-1.12.4.min.js"></script>
        <script type="text/javascript" src="/js/bootstrap.js"></script>
        <script type="text/javascript" src="/js/bootstrap.min.js"></script>
        <style>
            .tu {
                margin-top: 100px;
            }
        </style>
        <script type="text/javascript">
            $(function () {
                var backfile = $("#uploadBackPhotoFile");
                backfile.change(function () {
                    if (backfile != null) {
                        uploadBackImg();
                    }
                })
                var headfile = $("#file");
                headfile.change(function () {
                    if (headfile != null) {
                        uploadHeadImg();
                    }
                })
                function uploadBackImg() {
                    var formData = new FormData();
                    formData.append("uploadBackPhotoFile", document.getElementById("uploadBackPhotoFile").files[0]);
                    $.ajax({
                        type: "post",
                        url: "${pageContext.request.contextPath}/User/uploadBackPhoto.do",
                        data: formData,
                        dataType: "json",
                        async: false,
                        contentType: false,
                        processData: false,
                        success: function (data) {
                            if (data.status == "true") {
                                $('#showimg').html('<img width="100" height="100" src="/file/upload/UserBackPhoto/' + data.filename + '" />');
                            } else {
                                alert(data.msg)
                            }
                        },
                        error: function () {
                            alert("访问后台失败!");
                        }

                    })
                }
                    function uploadHeadImg() {
                        var formData = new FormData();
                        formData.append("uploadHeadPhotoFile", document.getElementById("file").files[0]);
                        $.ajax({
                            type: "post",
                            url: "${pageContext.request.contextPath}/User/uploadHeadPhoto.do",
                            data: formData,
                            dataType: "json",
                            async: false,
                            contentType: false,
                            processData: false,
                            success: function (data) {
                                if (data.status == "true") {
                                    $('#showimg2').html('<img width="100" height="100" src="/file/upload/UserHeadPhoto/' + data.filename + '" />');
                                } else {
                                    alert(data.msg)
                                }
                            },
                            error: function () {
                                alert("访问后台失败!");
                            }
                        })
                    }
            });
        </script>
    </head>

<body>
<%--<object data="/jsp/articlelist.jsp" id="headlist" style="z-index: 10000"></object>--%>
<form action="/User/updateUser.do" enctype="multipart/form-data" method="post" id="xing">
    <div id="backgroundcolor">
        <div id="header">
            <div id="headerBackImg">
                <!--<img src="/img/ph1.jpg">-->
                <div class="tx ovf">
                    <div class="ovf tx-img">
                        <img src="/file/upload/UserBackPhoto/${sessionScope.User.backphoto}" alt="">
                        <div id="showimg"></div>
                        <div class="upload-b">
                            <span class="glyphicon glyphicon-camera"></span>
                            <input type="file" style="height: 180px;position: absolute;top: -1px;right:30px;" id="uploadBackPhotoFile" name="back" class="upload1"/>
                        </div>
                    </div>
                </div>
                <div id="headimg">
                    <div class="emhead">
                        <input type="file" name="head" value="修改头像" style="position: absolute;top: 200px;height:120px;" id="file"
                               onchange="handleFiles(this,'icon')"/>
                        <img src="/file/upload/UserHeadPhoto/${sessionScope.User.headphoto}" id="icon">
                        <div id="showimg2"></div>
                    </div>
                </div>
                <div id="headerName">
                    <span id="userName" class="span1">Cham</span>
                    <div id="ind">
                        <a id="inda" href="/User/updateUserMessage.do">返回我的主页&nbsp;&nbsp;&nbsp;></a>
                    </div>
                </div>
                <div id="headbody">
						<span class="span">
					用户名<input type="text" class="input" name="nickname" value="${sessionScope.User.nickname}"/>
					</span>
                    <hr/>
                    <span class="span">
					性别<c:if test="${sessionScope.User.gender == 1}">
                        <input type="text" class="input" name="genderString" value="女"/>
                    </c:if>
                            <c:if test="${sessionScope.User.gender == 2}">
                                <input type="text" class="input" name="genderString" value="男"/>
                            </c:if>
					</span>
                    <hr/>
                    <span class="span">
					一句话介绍<input type="text" class="input" name="describes" value="${sessionScope.User.describes}"/>
					</span>
                    <hr/>
                    <span class="span">
					居住地<input type="text" class="input" name="address" value="${sessionScope.User.address}"/>
					</span>
                    <hr/>
                    <span class="span">
					出生日期<input type="text" class="input" name="birthday" value="${sessionScope.User.birthday}"/>
					</span>
                    <hr/>
                    <span class="span">
					爱好<input type="text" class="input" name="hobby" value="${sessionScope.User.hobby}"/>
					</span>
                    <hr/>
                    <input class="input" id="input" type="submit" value="保存"/>
                    <input type="text" name="id" hidden="hidden" value="${sessionScope.User.id}">
                </div>
            </div>
        </div>
    </div>
</form>
</body>
<script src="js/files.js"></script>
<script src="js/bflie.js"></script>
</html>